<template>
  <div class="wrap">
    <div class="mask" :class="{'waring': waring}">
      <div class="top-wrap">
        <div class="value-wrap">
          <p class="title">累计金额</p>
          <p class="content">1,923</p>
        </div>
        <div class="value-wrap">
          <p class="title">会员数</p>
          <p class="content">23,123</p>
        </div>
        <div class="value-wrap">
          <p class="title">服务人数</p>
          <p class="content">3,123</p>
        </div>
        <div class="value-wrap">
          <p class="title">举办活动</p>
          <p class="content">5,123</p>
        </div>
        <div class="value-wrap">
          <p class="title">总设备数</p>
          <p class="content">5,123</p>
        </div>
        <div class="value-wrap red-background">
          <p class="title">总警告数</p>
          <p class="content">5,123</p>
        </div>
        <div class="value-wrap red-background">
          <p class="title">设备异常数</p>
          <p class="content">5,123</p>
        </div>
      </div>
      <div class="left-wrap" v-if="equipmentList.length > 0">
        <p class="title">{{equipmentList[equipmentActivated].regionalName}}</p>
        <p class="content">设备名称：{{equipmentList[equipmentActivated].deviceName}}</p>
      </div>
      <div class="right-wrap">
        <div class="value-container">
          <div class="equipment-wrap" :class="{'actived': index === equipmentActivated}" v-for="(item,index) in equipmentList" :key="`equipmentList_${index}`">
            {{item.deviceName}}-{{item.regionalName}}
          </div>
        </div>
      </div>
      <div class="bottom-wrap">
        <div class="progress-wrap">
          <el-progress
            class="progress"
            color="#0AA5FF"
            type="circle"
            :show-text="false"
            :percentage="25"
          ></el-progress>
          <p class="title">已完成</p>
          <p class="content">20%</p>
        </div>
        <div class="content-wrap">
          <p class="title">
            距离活动开始还剩
            <span>33</span>
            天
          </p>
          <p class="content">
            当前评分
            <span>
              48
            </span>
            分，未达到活动运营标准
          </p>
        </div>
        <div class="content-wrap right">
          <div class="content">
            <div class="left">
              <img
                src="../../../assets/images/page2/sheshijianguan@2x.png"
                alt=""
              />
              <p class="title">基础设施</p>
            </div>
            <div class="right">
              <p class="value">20%</p>
            </div>
          </div>
          <div class="content">
            <div class="left">
              <img src="../../../assets/images/page2/jifen@2x.png" alt="" />
              <p class="title">活动设施</p>
            </div>
            <div class="right">
              <p class="value">20%</p>
            </div>
          </div>
          <div class="content">
            <div class="left">
              <img src="../../../assets/images/page2/renyuan-6@2x.png" alt="" />
              <p class="title">人员安排</p>
            </div>
            <div class="right">
              <p class="value">20%</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <iframe
      src="https://www.thingjs.com/pp/4cd324e2d0bb000e2088b444"
      frameborder="0"
    ></iframe>
  </div>
</template>
<script>
import apis from '@/apis'

export default {
  data() {
    return {
      equipmentList: [],
      equipmentActivated: 0,
      waring: false,
    };
  },
  methods: {
    /**
     * @function 向3D抛送数据
     * @param {Object} data 要抛送给3D的数据
     */
    sendMessage(data) {
      // 第一个参数是具体的信息内容，
      // 第二个参数是接收消息的窗口的源（origin），即"协议 + 域名 + 端口"。也可以设为*，表示不限制域名，向所有窗口发送
      window.frames[0].postMessage(data, "*");
    },
    getMessage(data) {
      alert(`我收到了数据`, data);
    },
    startGetInfo() {
      setInterval(() => {
        if (this.equipmentActivated !== this.equipmentList.length - 1) {
          this.equipmentActivated += 1
          let top = document.querySelector('.actived.equipment-wrap').offsetTop
          document.querySelector('.value-container').scrollTop = top - 20
        } else {
          this.equipmentActivated = 0
          document.querySelector('.value-container').scrollTop = 0
        }
        // this.getInfo()
      }, 10000)
    },
    getInfo() {
      this.sendMessage({
        data: {
          'name': this.equipmentList[this.equipmentActivated].deviceName,
          'area': this.equipmentList[this.equipmentActivated].regionalName,
        },
        funcName: 'flyTo',
        param: `[id=${this.equipmentList[this.equipmentActivated].deviceId}]`
      })
      // this.sendMessage({
      //   data: {
      //     'name': this.equipmentList[this.equipmentActivated].deviceName,
      //     'area': this.equipmentList[this.equipmentActivated].regionalName,
      //   },
      //   funcName: 'createUIAnchor',
      //   param: `[id=${this.equipmentList[this.equipmentActivated].deviceId}]`
      // })
    },
    openWebsocket() {
      const wsServer = process.env.NODE_ENV === 'development' ? `ws://192.168.10.127:8003/websocket/1` : `ws://101.37.205.208:8003/websocket/1` // 服务器地址
      const websocket = new WebSocket(wsServer) // 创建WebSocket对象
      websocket.onmessage = (evt) => {
        try {
          let data = JSON.parse(evt.data)
          if (data.type === '1') {
            this.$notify({
              title: '入侵提醒',
              dangerouslyUseHTMLString: true,
              message: `<img width="250" src="${data.imgPathList[0]}"></img>`,
              type: 'error',
              duration: 30000
            });
            this.waring = true
            setTimeout(() => {
              this.waring = false
              this.sendMessage({
                funcName: 'init',
                param: ``
              })
            }, 30000);
            this.getInfo()
          }
        } catch(e) {
          console.log(e)
        }
      }
    },
  },
  mounted() {
    // setTimeout(() => {
    //   this.sendMessage({
    //     data: `我在测试`,
    //     funcName: 'flyTo',
    //     param: '[物体类型=摄像头]'
    //   })
    // }, 10000);
    // 开始轮询设备

    window.addEventListener(
      "message",
      e => {
        if (e.data.form === "thing") {
          this.getMessage(e);
        }
      },
      false
    );
    // 获取数据
    this.$http.post(apis.deviceList, {}).then(res => {
      this.equipmentList = res.data.rows
      this.startGetInfo()
    })
    this.openWebsocket()
  }
};
</script>
<style lang="less" scoped>
* {
  margin: 0;
}
.wrap {
  width: 100%;
  height: 100vh;
  .mask {
    width: 100%;
    height: 100vh;
    position: absolute;
    z-index: 2;
    background: url("../../../assets/images/page2/middle-background.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    &.waring{
      background: url("../../../assets/images/page2/middle-background-waring.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
    .top-wrap {
      width: calc(100% - 212px);
      margin: 0 auto;
      height: 106px;
      margin-top: 22px;
      .value-wrap {
        width: 220px;
        height: 106px;
        background: url("../../../assets/images/page2/value-background.png");
        background-size: 100% 100%;
        float: left;
        & + .value-wrap {
          margin-left: 22px;
        }
        &.red-background {
          background: url("../../../assets/images/page2/value-background-red.png");
          background-size: 100% 100%;
          .title {
            color: #ff508a;
          }
        }
        .title {
          font-size: 16px;
          font-family: SourceHanSansSC-Regular, SourceHanSansSC;
          font-weight: 400;
          color: rgba(10, 165, 255, 1);
          line-height: 50px;
        }
        .content {
          font-size: 36px;
          font-family: SourceHanSansSC-Regular, SourceHanSansSC;
          font-weight: 400;
          color: rgba(255, 255, 255, 1);
          line-height: 54px;
          text-shadow: 0px 2px 6px rgba(255, 255, 255, 0.25);
          line-height: 50px;
        }
      }
    }
    .left-wrap {
      width: 280px;
      height: 222px;
      background: url("../../../assets/images/page2/middle-left-background.png");
      background-size: 100% 100%;
      position: absolute;
      top: 412px;
      left: 106px;
      .title {
        font-size: 20px;
        font-family: SourceHanSansSC-Medium, SourceHanSansSC;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        line-height: 90px;
      }
      .content {
        font-size: 20px;
        font-family: SourceHanSansSC-Medium, SourceHanSansSC;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        line-height: 30px;
      }
    }
    .right-wrap {
      width: 280px;
      height: 222px;
      background: url("../../../assets/images/page2/middle-right-background.png");
      background-size: 100%;
      background-repeat: no-repeat;
      position: absolute;
      top: 412px;
      right: 106px;
      .value-container{
        width: 100%;
        height: 202px;
        margin-top: 20px;
        overflow-y: auto;
        &::-webkit-scrollbar {display:none}
      }
    }
    .bottom-wrap {
      width: 1430px;
      height: 114px;
      background: url("../../../assets/images/page2/bottom-background.png");
      position: absolute;
      left: calc((100vw - 1430px) / 2);
      bottom: 50px;
      background-size: 100% 100%;
      .progress-wrap {
        width: 140px;
        height: 140px;
        position: absolute;
        left: -116px;
        top: -5px;
        .progress {
          background: rgba(10, 165, 255, 0.2);
          overflow: hidden;
          border-radius: 100px;
        }
        p.title {
          font-size: 20px;
          font-family: SourceHanSansSC-Medium, SourceHanSansSC;
          font-weight: 500;
          color: rgba(255, 255, 255, 1);
          position: absolute;
          top: 0;
          text-align: center;
          width: 100%;
          margin-top: 25px;
        }
        p.content {
          position: absolute;
          top: 50px;
          text-align: center;
          width: 100%;
          font-size: 36px;
          font-family: SourceHanSansSC-Medium, SourceHanSansSC;
          font-weight: 500;
          color: rgba(10, 165, 255, 1);
          line-height: 54p;
        }
      }
      .content-wrap {
        width: 50%;
        height: 114px;
        float: left;
        .title {
          font-size: 22px;
          font-family: SourceHanSansSC-Medium, SourceHanSansSC;
          font-weight: 500;
          color: rgba(255, 255, 255, 1);
          text-align: left;
          text-indent: 50px;
          margin-top: 10px;
          span {
            font-size: 30px;
          }
        }
        .content {
          font-size: 22px;
          font-family: SourceHanSansSC-Medium, SourceHanSansSC;
          font-weight: 500;
          color: rgba(255, 255, 255, 1);
          text-align: left;
          text-indent: 50px;
          margin-top: 20px;
          span {
            color: #d55988;
          }
        }
        &.right {
          .content {
            width: 33%;
            margin-top: 0;
            float: left;
          }
          .left {
            width: 100px;
            float: left;
            img {
              width: 52px;
              height: 52px;
              clear: both;
              float: left;
              margin: auto 24px;
              margin-top: 15px;
              margin-bottom: 10px;
            }
            .title {
              font-size: 20px;
              font-family: SourceHanSansSC-Medium, SourceHanSansSC;
              font-weight: 500;
              color: rgba(255, 255, 255, 1);
              margin-top: 0;
              text-indent: 0;
              float: left;
              width: 100%;
              text-align: center;
            }
          }
          .right {
            width: 50px;
            float: left;
            .value {
              font-size: 36px;
              font-family: SourceHanSansSC-Medium, SourceHanSansSC;
              font-weight: 500;
              color: rgba(255, 255, 255, 1);
              line-height: 114px;
              text-align: left;
              text-indent: 10px;
            }
          }
        }
      }
    }
  }
  iframe {
    width: 100%;
    height: 100vh;
    z-index: 1;
  }
  .equipment-wrap{
    width: 100%;
    height: 30px;
    font-size: 17px;
    color: #fff;
    text-align: left;
    text-indent: 70px;
    margin-bottom: 20px;
    &.actived{
      color: #FEAB43;
      background:linear-gradient(85deg,rgba(8,127,218,0) 0%,rgba(8,127,218,0.4) 50%,rgba(8,127,218,0) 100%);
    }
  }
}
</style>
